<template>
    <div>
        <Title>商场预售订单管理列表</Title>
        <NuxtLayout name="common">
            <div class="box-container mt-[30px]">
                <t-card title="订单列表" :bordered="false">
                    <div class="order-box">
                        <span v-if="isOrder">
                            <t-list>
                                <t-list-item v-for="(item, index) in orderList">
                                    <b>{{ item.user.username }} 的预售订单</b>
                                    <template #action>
                                        <t-button disable theme="primary" hover="color" style="margin-left: 16px"
                                            @click="showOrderDetail(index)"> 详情 </t-button>
                                    </template>
                                </t-list-item>
                            </t-list>
                        </span>
                        <span v-else>
                            暂无用户订单，无需操作
                        </span>
                    </div>
                </t-card>
            </div>
            <div class="functions mt-[30px]">
                <t-card title="按需发货" :bordered="false">
                    <t-checkbox-group v-model="outList">
                        <t-checkbox key="all" :check-all="true" label="全选" />
                        <t-checkbox v-for="(item, index) in goodsMapsLists" :key="index"
                            :value="item.goods_title">{{ item.goods_title }}</t-checkbox>
                    </t-checkbox-group>
                    <div class="mt-[30px]"></div>
                    <t-button @click="expressMethod">物流发货</t-button>
                    <span class="ml-[30px]"></span>
                    <t-button theme="default" @click="selfMethod">售后出库</t-button>
                </t-card>
            </div>
            <client-only>
                <div class="dialog-box">
                    <t-dialog v-model:visible="isShowDetail" header="详情" width="50%" :on-close="close">
                        <span class="text-lg block font-[600]">品名</span>
                        <span class="block" v-for="(item, index) in detailContent.data.goods_list">{{ item.goods_title
                            }}----------------{{ item.number }}件</span>
                        <span class="text-lg block font-[600]">收货信息</span>
                        <span class="block">收件人：{{ detailContent.data.user.username }}</span>
                        <span class="block">联系电话：{{ detailContent.data.user.phone }}</span>
                        <span class="block">收件地址：{{ detailContent.data.user.address }}</span>
                        <span class="block">预售学校：{{ detailContent.data.user.school }}</span>

                    </t-dialog>
                </div>
            </client-only>
        </NuxtLayout>
    </div>
</template>

<script setup lang="ts">
import { MessagePlugin } from 'tdesign-vue-next';
import { onMounted, reactive, ref } from 'vue';

let date = new Date();


// 是否显示详情
const isShowDetail = ref(false);

// 详情内容
const detailContent = reactive({
    data: {
        user: {
            username: '',
            phone: '',
            school: '',
            address: ''
        }
    }
});

// 关闭dialog
const close = () => {
    isShowDetail.value = false
}

// 点击显示详情按钮
const showOrderDetail = (index) => {
    // 获取本地订单表
    let orderTables = localStorage.getItem('orderTables') || [];
    orderTables = JSON.parse(orderTables);
    console.log(orderTables);

    detailContent.data = orderTables[index];
    isShowDetail.value = true
}

// 是否存在订单
const isOrder = ref(false)

// 订单列表
const orderList = ref([])

// 预售汇总
const goodsMapsLists = ref([]);

// 汇总选中项目
const outList = ref([]);

// 物流发货
const expressMethod = () => {
    // 获取所有汇总
    let goodsMaps = localStorage.getItem('goodsMaps');
    goodsMaps = JSON.parse(goodsMaps);
    // 获取所有订单信息
    let orderTables = localStorage.getItem('orderTables');
    orderTables = JSON.parse(orderTables);

    // 生成出库单号
    let out_time = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;

    // 循环匹配
    outList.value.forEach(item => {

        goodsMaps.forEach(mapItem => {
            if (item === mapItem.goods_title) {
                if (mapItem.number == 0) {
                    MessagePlugin.error({
                        content: '有包含已经出库产品'
                    })
                    return
                }
                mapItem.out_time = out_time
            }
        })
    })

    localStorage.setItem('goodsMaps', JSON.stringify(goodsMaps))

    MessagePlugin.success({
        content: '已出库'
    })
}

// 售后发货
const selfMethod = () => {
    console.log(outList.value);

}



// 初始化
const __initiaze = () => {
    // 获取本地订单
    let orderTables = localStorage.getItem('orderTables') || [];
    if (orderTables === null) { // 暂无订单
        isOrder.value = false
    } else { // 有订单
        let tmpOrderList = JSON.parse(orderTables);
        orderList.value = tmpOrderList;
        isOrder.value = true;

    }

    // 获取预售订单汇总数据
    let goodsMaps = localStorage.getItem('goodsMaps') || [];
    goodsMaps = JSON.parse(goodsMaps);
    goodsMapsLists.value = goodsMaps;
}

onMounted(() => {
    __initiaze();
    setInterval(() => {
        __initiaze();
    }, 50000);
})
</script>

<style scoped></style>